<template>
  <div class="pageOut">
    <div class="pageIn">
      <el-form :inline="true" :model="formSearch" size="small">
        <el-form-item>
          <el-input
            v-model="formSearch.app_name"
            placeholder="代理商名称"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        ref="table"
        :height="height - 170"
        :data="tableData"
        :header-cell-style="{ background: '#FAFAFA', color: '#606266' }"
        v-loading="loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        style="width: 100%"
      >
        <el-table-column prop="agentName" label="代理商名称"></el-table-column>
        <el-table-column prop="phone" label="电话号码"></el-table-column>
        <el-table-column
          prop="balance"
          :show-overflow-tooltip="tooltip"
          label="账户余额"
        ></el-table-column>

        <el-table-column :show-overflow-tooltip="tooltip" label="每日营收">
          <template slot-scope="scope">
            <el-link @click="lookClick(scope.row, 'day')" type="primary"
              >点击查看</el-link
            >
          </template>
        </el-table-column>
        <el-table-column label="每月营收" :show-overflow-tooltip="tooltip">
          <template slot-scope="scope">
            <el-link @click="lookClick(scope.row, 'month')" type="primary"
              >点击查看</el-link
            >
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="tooltip" label="结款记录">
          <template slot-scope="scope">
            <el-link @click="moneyClick(scope.row)" type="primary"
              >点击查看</el-link
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="payment_time"
          :show-overflow-tooltip="tooltip"
          label="最近打款"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="handleDel(scope.row)"
              v-show="permission.del"
              >结款</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <el-dialog
        :title="lookType == 'day' ? '每日营收' : '每月营收'"
        :visible.sync="dialogVisible"
        width="50%"
      >
        <el-table :data="revenueTableData" border style="width: 100%">
          <el-table-column prop="agentName" label="代理商名"> </el-table-column>
          <el-table-column prop="create_time" label="结款时间"> </el-table-column>
          <el-table-column prop="payAmount" label="结款金额"> </el-table-column>
          <el-table-column prop="surplusAmount" label="结款后余额"> </el-table-column>
        </el-table>
        <div class="paginationBox">
          <el-pagination
            @current-change="revenuePage"
            background
            layout="prev, pager, next"
            :total="revenueTotal"
          >
          </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>

      <el-dialog title="结款记录" :visible.sync="moneyDialog" width="50%">
        <el-form :inline="true" :model="formSearch" size="small">
          <el-form-item>
            <el-input
              v-model="moneySearch.petName"
              placeholder="操作人"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="moneySearch.date"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" @click="moneySearchClick"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <el-table :data="moneyTableData" border style="width: 100%">
          <el-table-column prop="agentName" label="代理商名">
          </el-table-column>
          <el-table-column prop="create_time" label="结款时间">
          </el-table-column>
          <el-table-column prop="payAmount" label="结款金额"> </el-table-column>
          <el-table-column prop="surplusAmount" label="结款后余额">
          </el-table-column>
          <el-table-column prop="userName" label="操作人"> </el-table-column>
        </el-table>
        <div class="paginationBox">
          <el-pagination
            @current-change="blancePage"
            background
            layout="prev, pager, next"
            :total="revenueTotal"
          >
          </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="moneyDialog = false">取 消</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="结款"
        top="4vh"
        :visible.sync="visible"
        width="40%"
        @close="resetForm('ruleForm')"
      >
        <div class="cardcontent">
          <div class="content_list">
            <div class="news_title">
              <div class="goods_name">商户名称</div>
              <div class="goods_number" style="display: flex">贵州茅台</div>
            </div>
            <div class="news_title">
              <div class="goods_name">电话号码</div>
              <div class="goods_number" style="display: flex">13737737822</div>
            </div>
          </div>
          <div class="content_list">
            <div class="news_title">
              <div class="goods_name">开户行</div>
              <div class="goods_number">荣业银行</div>
            </div>
            <div class="news_title">
              <div class="goods_name">银行卡号</div>
              <div class="goods_number">124234242534534</div>
            </div>
          </div>
        </div>
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="110px"
          style="padding-top: 30px; margin-left: 17%"
          :rules="rules"
        >
          <el-form-item
            label="结款金额"
            prop="refundPrice"
            :rules="[
              {
                required: true,
                message: '不能为空',
                trigger: 'change',
              },
            ]"
          >
            <el-input
              v-model="ruleForm.refundPrice"
              @input="priceInput"
              oninput="this.value=this.value.replace(/[^\d]/g,'')"
              style="width: 300px"
              placeholder="请输入价格"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="contentText">
          <span>结算后剩余金额: &nbsp;</span
          ><span class="colorText">{{ balance }}元</span>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>

          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            :loading="confirmLoading"
            >{{ confirmLoading ? "保存中..." : "保 存" }}</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  settlementAgentList, //结款记录
  settAgentDays, // 每日营收
  settAgentMonth, // 每月营收
  agentList,
  MAIN,
  bulAgentList,
  delProject,
  agentPrice
} from "../../utils/api";

export default {
  name: "ProjectList",
  props: ["height"],

  data() {
    return {
      rules: {},
      tableData: [],
      moneySearch: {
        petName: "",
        date: "",
      },
      agentId: "",
      balance: 0,
      lookType: "day",
      revenueTotal: 0,
      revenueTableData: [],
      dialogVisible: false,
      tooltip: true, //内容过长被隐藏时显示 tooltip
      loading: true, //显示加载表格
      pageSize: 10, //每页多少条
      revenuePageNumber: 1,
      blancePageNumber: 1,
      currentPage: 1, //当前第几页
      pageSizes: [10, 20, 30, 40, 50], //每页选择条数
      total: 0, //共多少条
      errImg: 'this.src="' + require("../../../static/img/user.png") + '"',
      permission: {
        add: false,
        edit: false,
        del: false,
        status: false,
      }, //权限
      formSearch: {
        appid: "",
        app_name: "",
      }, //搜索
      balance: 0,
      //编辑弹窗
      visible: false,
      confirmLoading: false,
      moneyDialog: false,
      moneyTableData: [],
      type: "",
      currentRow: {}, //当前行数据信息
      ruleForm: {
        refundPrice: "",
      }, //添加和修改的表单
      userInfo: {},
    };
  },

  mounted() {
    this.getResource();
  },
  methods: {
    submitForm(formName) {
      if (this.ruleForm.refundPrice == 0 || this.ruleForm.refundPrice == "")
        return this.$notify.error("不能为0或为空");
      let params = {
        agentId: this.currentRow.id,
        userId: this.userInfo.id,
        payAmount: this.ruleForm.refundPrice,
      };
      this.confirmLoading = true;
      this.postRequest(agentPrice, params, MAIN).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.confirmLoading = false;

          this.$notify({
            message: res.msg,
            type: "success",
          });
          this.getData();
          this.visible = false;
        } else {
          this.confirmLoading = false;
          this.visible = false;
        }
      });
    },
    revenuePage(val) {
      this.revenuePageNumber = val;
      this.lookClick(this.currentRow, this.lookType);
    },
    lookClick(row, type) {
      this.currentRow = row;

      this.lookType = type;
      let params = {
        pageSize: 10,
        pageNumber: this.revenuePageNumber,
        agentId: row.id,
      };
      if (type == "day") {
        this.postRequest(settAgentDays, params, MAIN).then((res) => {
          if (res.code === 200) {
            this.revenueTableData = res.data.list;
            this.revenueTotal = res.data.count;
          }
        });
      } else {
        this.postRequest(settAgentMonth, params, MAIN).then((res) => {
          if (res.code === 200) {
            this.revenueTableData = res.data.list;
            this.revenueTotal = res.data.count;
          }
        });
      }
      this.dialogVisible = true;
    },
    moneyClick(row) {
      this.moneyDialog = true;
      this.currentRow = row;
      let start_time = "";
      let end_time = "";

      if (this.moneySearch.date != "" && this.moneySearch.date != null) {
        start_time = this.moneySearch.date[0];
        end_time = this.moneySearch.date[1];
      }
      let params = {
        pageSize: 10,
        pageNumber: this.revenuePageNumber,
        agentId: row.id,
        userName: this.moneySearch.petName,
        start_time,
        end_time,
      };
      this.postRequest(settlementAgentList, params, MAIN).then((res) => {
        if (res.code === 200) {
          this.moneyTableData = res.data.list;
          this.revenueTotal = res.data.count;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    blanceBulClick(row) {
      // this.postRequest(bulAgentList);
    },
    moneySearchClick() {
      this.blancePageNumber = 1;
      this.moneyClick(this.currentRow);
    },
    blancePage(val) {
      this.blancePageNumber = val;
      this.moneyClick(this.currentRow);
    },
    getResource() {
      // console.log(this.$route.name);
      this.loading = true;
      const userinfo = JSON.parse(sessionStorage.getItem("userInfo")); //解密,获取用户登录信息
      this.userInfo = userinfo;
      let arr = userinfo.menu_id.split(",");
      // console.log(arr)
      // 结款 123

      if (arr.indexOf("123") > -1) {
        this.permission.del = true;
      }

      this.getData();
    },
    //获取初始数据
    getData() {
      this.loading = true;
      let params = {
        agentName: this.formSearch.app_name,
        // appid: this.formSearch.appid,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
      };
      this.postRequest(agentList, params, MAIN).then((res) => {
        if (res.code == 200) {
          // console.log(res);
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.loading = false;
          this.$nextTick(() => {
            //避免表格表头样式错乱
            if (this.$refs.table) this.$refs.table.doLayout();
          });
        }
      });
    },

    //分页
    handleSizeChange(val) {
      //每页 ${val} 条
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      //当前页
      this.currentPage = val;
      this.getData();
    },
    //查询
    search() {
      this.getData();
    },
    //新增
    handleAdd() {
      this.type = "add";
      this.currentRow = {};
      this.visible = true;
    },
    priceInput(value) {
      // console.log(value);

      this.ruleForm.refundPrice = value.replace(/[^\d]/g, "");
      if (
        Number(this.currentRow.balance) - Number(this.ruleForm.refundPrice) <
        0
      ) {
        this.ruleForm.refundPrice = 0;
        this.$notify.error("余额不足");
      }
      let price =
        Number(this.currentRow.balance) - Number(this.ruleForm.refundPrice);
      this.balance = Number(price);
    },
    //删除
    handleDel(row) {
      this.currentRow = row;
      this.balance = row.balance;
      this.visible = true;
    },
  },
};
</script>

<style scoped>
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff;
  color: #fff;
  cursor: pointer;
}
/deep/ .el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.paginationBox {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 20px;
}
.news_title {
  display: flex;
  padding-top: 27px;
  flex: 1;
}
.cardcontent {
  padding: 20px 20px;
  padding-top: 0px;
  opacity: 1;
  border-radius: 4px;
}
.content_list {
  display: flex;
  justify-content: space-between;
}
.goods_list {
  padding: 20px 20px 30px 20px;
}

.goods_name {
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(62, 63, 66, 1);
}
.contentText {
  width: 100%;
  margin-left: 35%;
  margin-top: 40px;
  font-size: 18px;
}
.colorText {
  font-weight: bold;
  color: red;
}
.goods_number {
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(158, 160, 165, 1);
  padding-left: 20px;
}
</style>
